import React from 'react'
import {
    View, StyleSheet, Image, Text, Platform, TouchableWithoutFeedback
} from 'react-native'

export default class CommunityMediaGatherCellView extends React.PureComponent {

    render() {
        if (this.props.item == null) return null
        this.pic = {
            uri: this.props.item.url
        }
        let length = this.props.length
        let margin = this.props.margin
        var fontSize = 30

        if (Platform.isPad) {
            fontSize = 50
        }

        // console.log('index = ' + this.props.index)
        if (this.props.index == 2 && this.props.data.img.length > 3) {
            return (
                <TouchableWithoutFeedback onPress={this.onPress}>
                    <View style={{ width: length + margin, height: length }}>
                        <Image 
                            style={[styles.img, { width: length, height: length }]} 
                            source={this.pic} 
                            cache={'force-cache'}
                        />
                        <View style={[styles.shadows, { width: length, height: length }]}>
                            <Text style={[styles.txt, { fontSize: fontSize }]}>+{this.props.data.img.length - 3}</Text>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            )
        } else {
            return (
                <TouchableWithoutFeedback onPress={this.onPress}>
                    <View style={{ width: length + margin, height: length }}>
                        <Image 
                            style={[styles.img, { width: length, height: length }]} 
                            source={this.pic} 
                            cache={'force-cache'}
                        />
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    }

    onPress = () => {
        this.props.clickImgAction(this.props.data, styles.img.borderRadius, this.props.index)
    }
}

const styles = StyleSheet.create ({
    img: {
        resizeMode: 'cover',
        borderRadius: 5,
        backgroundColor: '#eeeeee',
    },
    shadows: {
        position: 'absolute',
        backgroundColor: 'rgba(0,0,0,0.4)',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    txt: {
        fontWeight: 'bold',
        color: 'white'
    }
})